<template>
  <div>
    <h1>{{$store.state}}</h1>
    <p>12点了，上号！</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <router-link class="aaa" :to="'/detail/'+item.name">{{item.name}}</router-link>
      </li>
    </ul>
    <hr>
    <p>￥{{$store.state.money}}元</p>
    <input type="text" v-model.number="money">
    <el-button type="success" @click="recharge">充！</el-button>
  </div>
</template>

<script>
import {RECHARGE} from '../store/mutation-type'
export default {
  data() {
    return {
      list: [
        {name: '单身情歌', id: '001'},
        {name: '你相信光吗？', id: '002'},
        {name: '汪汪队立大功', id: '003'},
        {name: '海底小纵队', id: '004'}
      ],
      money: 0
    }
  },
  created() {
    document.title = this.$route.meta.title || '你好';
  },
  methods: {
    recharge() {
      this.$store.commit(RECHARGE, this.money)
    }
  }
}
</script>

<style>
  a {
    color: red;
  }
  .aaa {
    text-decoration: none;
  }
</style>